<template>
  <view class="content">
    <view @click="chooseAvatar" class="avatar">
      <view class="left">
        <text>头像</text>
      </view>
      <view class="right">
        <image :src="userinfo.avatar"></image>
      </view>
    </view>
    <view class="hz1">
      <view class="item">
        <view class="left">
          <text>昵称</text>
        </view>
        <view class="right">
          <input @blur="updateInfo('nickname',userinfo.nickname)" placeholder="请输入昵称" v-model="userinfo.nickname"/>
          <image src="/static/my/yjt.png" mode="heightFix"></image>
        </view>
      </view>
      <picker @change="genderChange" :range="['男','女']">
        <view class="item">
          <view class="left">
            <text>性别</text>
          </view>
          <view class="right">
            <input disabled :value="userinfo.gender===1?'男':userinfo.gender===2?'女':''" placeholder="去设置"/>
            <image src="/static/my/yjt.png" mode="heightFix"></image>
          </view>
        </view>
      </picker>

    </view>
    <view class="hz1">
      <view class="item">
        <view class="left">
          <text>紧急联系人</text>
        </view>
        <view class="right">
          <input  @blur="updateInfo('contacts',userinfo.contacts)" v-model="userinfo.contacts"/>
          <image src="/static/my/yjt.png" mode="heightFix"></image>
        </view>
      </view>
    </view>
    <view class="hz1">
      <view class="item"  @tap="goNext('/pages/xy/xy?key=sfbz')">
        <view class="left">
          <text>收费标准</text>
        </view>
        <view class="right">
          <image src="/static/my/yjt.png" mode="heightFix"></image>
        </view>
      </view>
      <view class="item" @tap="goNext('/pages/xy/xy?key=fltkbz')">
        <view class="left">
          <text>辉鲨货滴法律条款标准</text>
        </view>
        <view class="right" >
          <image src="/static/my/yjt.png" mode="heightFix"></image>
        </view>
      </view>
      <view class="item"  @tap="goNext('/pages/xy/xy?key=about')">
        <view class="left">
          <text>关于辉鲨货滴</text>
        </view>
        <view class="right">
          <image src="/static/my/yjt.png" mode="heightFix"></image>
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btn" @tap="logout()">
      <text>退出登陆</text>
    </view>
  </view>
</template>

<script>
import {baseUrl} from "../../common/api";
import request from "../../common/request";

export default {
  data() {
    return {
      userinfo: uni.getStorageSync('userinfo'),

    }
  },
  onLoad() {
    let user = uni.getStorageSync('user')
    this.user = {
      avatar: user.avatar,
      nickname: user.nickname,
      gender: user.gender,
      contacts: user.contacts
    }
  },
  methods: {
    //更新用户信息
    updateInfo(field,value){
      request({
        url:'/d/user/edit',
        method:'POST',
        data:{
          [field]:value
        }
      }).then(()=>{
        this.userinfo[field] = value;
        uni.setStorageSync('userinfo',this.userinfo);
        uni.showToast({
          title:'更新成功',
          icon:'none'
        })
      })
    },
    //选择头像
    chooseAvatar(){
      uni.chooseImage({
        count:1,
        crop:{
          width:100,
          height:100
        },
        success:(result)=>{
          console.log(result)
          uni.uploadFile({
            url:baseUrl+'/common/upload?token='+uni.getStorageSync('token'),
            method:'POST',
            name: 'file',
            filePath:result.tempFilePaths[0],
            data:{
              token:uni.getStorageSync('token'),
              filePath:result.tempFilePaths[0],

            },
            success:(res)=>{
              console.log(JSON.parse(res.data))
              this.userinfo.avatar = JSON.parse(res.data).data.fullurl;
              this.updateInfo('avatar',this.userinfo.avatar);
            }
          })
        }
      })
    },
    //选择性别
    genderChange({detail:{value}}){
      this.userinfo.gender=value+1;
      this.updateInfo('gender',value+1);

    },
    //退出登录
    logout() {
      uni.removeStorageSync('token')
      uni.removeStorageSync('user')
      //提示
      uni.showToast({
        icon: "success",
        title: "退出成功"
      })
      setTimeout(function () {
        uni.navigateBack();
      }, 2000)
    },
    //跳转
    goNext(url) {
      uni.navigateTo({
        url: url
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.content {
  .avatar {
    display: flex;
    padding: 20rpx 30rpx;
    background-color: #fff;

    .left {
      line-height: 120rpx;
      font-size: $uni-font-size-lg;
      font-weight: 600;
      color: #262626;
    }

    .right {
      margin-left: auto;

      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        border: 1 pr solid #F9F9F9;
      }
    }
  }

  .hz1 {
    margin-top: 20rpx;
    background-color: #fff;

    .item {
      display: flex;
      line-height: 45rpx;
      padding: 30rpx;
      font-size: $uni-font-size-lg;
      justify-content: space-between;

      .left {
        font-weight: 600;
        color: #262626;
      }

      .right {
        margin-left: auto;
        display: flex;
        color: #999;

        input {
          text-align: right;
        }

        image {
          margin-top: 10rpx;
          margin-left: 15rpx;
          height: 25rpx;
        }
      }
    }
  }

  .btn {
    margin: 100rpx auto 0;
    width: 620rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background-color: #895FFF;
    border-radius: 20rpx;
    font-size: $uni-font-size-lg;
    letter-spacing: 5rpx;
    color: #fff;
  }
}
</style>
<style>
page {
  background-color: #F6F6F6;
}
</style>
